<template>
  <el-dialog class="public-dialog" title="备货计划查询" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="formData" :originOption="originOption" @submit="queryTableList"></XForm>

      <vxe-grid v-bind="tableOptions" ref="tableRef" />
    </div>

    <template #footer>
      <el-button type="primary" :loading="loading" @click="handleClose(false)"> 确认 </el-button>
    </template>
  </el-dialog>
  <DialogUpdateSku ref="DialogUpdateSkuRef" @submit="handleSubmit" />
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { stockingPlanList } from "@/api/plan"
import XForm from "@/components/XForm/index.vue"
import DialogUpdateSku from "./DialogUpdateSku.vue"
const DialogUpdateSkuRef = ref()
const modelValue = ref(false)
const emit = defineEmits(["submit"])
onMounted(() => {
  getOption()
})
import { enumGet } from "@/api"

const getOption = async () => {
  let names = fieldList.value.filter((v) => v.originField).map((v) => v.originField)
  const { data } = await enumGet({ name: names })
  for (const key in data) {
    originOption.value[key] = data[key]
  }
}

const handleSubmit = (row) => {
  emit("submit", row)
  handleClose()
}

const data = reactive({
  formData: {},
  loading: false,
})
const { formData, loading } = toRefs(data)

const tableRef = ref()

const tableOptions = reactive({
  border: true,
  rowConfig: { height: 60 },
  columns: [
    { field: "pr_number", title: "备货计划单", width: 150 },
    { field: "plan_type_text", title: "备货类型", width: 80 },
    { field: "planning_department", title: "计划部门", width: 120 },
    { field: "plan_status_text", title: "计划状态", width: 80 },
    { field: "name", title: "备货SKU x", width: 100 },
    { field: "created_by_text", title: "添加人员", minWidth: 100 },
    { field: "created_at", title: "添加时间", width: 170 },

    {
      field: "fba",
      title: "操作",
      width: 120,
      slots: {
        default: ({ row }) => (
          <div>
            <el-button link type="primary" onClick={() => DialogUpdateSkuRef?.value.open(row)}>
              选择变更SKU
            </el-button>
          </div>
        ),
      },
    },
  ],

  pagerConfig: {},
  proxyConfig: {
    props: { result: "data", total: "total" },
    ajax: {
      query: ({ page }) => {
        let params = {
          ...formData.value,
          page: page.currentPage,
          page_num: page.pageSize,
        }
        console.log(params)
        return stockingPlanList(params)
      },
    },
  },
})

const queryTableList = () => {
  tableRef.value.commitProxy("reload")
}
const originOption = ref({})
const formOption = ref({ inline: true, option: true })
const fieldList = ref([
  {
    placeholder: "备货计划单",
    field: "pr_number",
    style: { width: "200px" },
  },
  {
    field: "plan_type",
    type: "select",
    options: {
      placeholder: "计划类型",
    },
    originField: "Plan.PlanStockingPlan.TypeEnum",
    style: { width: "200px" },
  },
  {
    field: "planning_department",
    type: "cascader",
    cascaderType: "department",
    placeholder: "运营部门",
    itemProps: {
      props: {
        emitPath: false,
        multiple: true,
        label: "name",
        value: "id",
        children: "sub",
      },
    },
  },
  {
    field: "status",
    type: "select",
    options: {
      placeholder: "计划状态",
    },
    originField: "Plan.PlanStockingPlan.PlanStatusEnum",
    style: { width: "200px" },
  },
])

const handleClose = () => {
  modelValue.value = false
}
const open = (params = {}) => {
  modelValue.value = true
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
